<template>
	<view class="bgg">
		<view style="height: 50rpx;"></view>
		
		<view class="shengxiao">
			<view :class="select==1?'shengxiaoobj shengxiao1 select':'shengxiaoobj shengxiao1'" @click="changeSelect(1)"></view>
			<view :class="select==2?'shengxiaoobj shengxiao2 select':'shengxiaoobj shengxiao2'" @click="changeSelect(2)"></view>
			<view :class="select==3?'shengxiaoobj shengxiao3 select':'shengxiaoobj shengxiao3'" @click="changeSelect(3)"></view>
			
			<view :class="select==4?'shengxiaoobj shengxiao4 select':'shengxiaoobj shengxiao4'" @click="changeSelect(4)"></view>
			<view :class="select==5?'shengxiaoobj shengxiao5 select':'shengxiaoobj shengxiao5'" @click="changeSelect(5)"></view>
			<view :class="select==6?'shengxiaoobj shengxiao6 select':'shengxiaoobj shengxiao6'" @click="changeSelect(6)"></view>
			
			<view :class="select==7?'shengxiaoobj shengxiao7 select':'shengxiaoobj shengxiao7'" @click="changeSelect(7)"></view>
			<view :class="select==8?'shengxiaoobj shengxiao8 select':'shengxiaoobj shengxiao8'" @click="changeSelect(8)"></view>
			<view :class="select==9?'shengxiaoobj shengxiao9 select':'shengxiaoobj shengxiao9'" @click="changeSelect(9)"></view>

			<view :class="select==10?'shengxiaoobj shengxiao10 select':'shengxiaoobj shengxiao10'" @click="changeSelect(10)"></view>
			<view :class="select==11?'shengxiaoobj shengxiao11 select':'shengxiaoobj shengxiao11'" @click="changeSelect(11)"></view>
			<view :class="select==12?'shengxiaoobj shengxiao12 select':'shengxiaoobj shengxiao12'" @click="changeSelect(12)"></view>
		</view>
		
		<view class="btn" @click="start()"></view>
		
	</view>
</template>
	
<script>
	const config = require("@/component/mod/config") 
	import { linkWebSocket } from '@/component/mod/linkSocket';
	export default{
		data(){
			return {
				select:1
			}
		},
		methods:{
			//选择盒子
			changeSelect(idx){
				this.select = idx;
			},
			// 
			start(){
				let that = this;
				//执行 getuuid()
				this.getuuid(this)
				// this.toindex(that)
				
			},
			// 通过生肖id获取uuid 回调时执行 toindex()
			getuuid(that){
				uni.request({
					url:"http://"+config.BaseUrl+'/Login?shengxiao='+that.select,
					success:function(res){
						//失败报错
						if(res.data.code != 0){uni.showToast({icon:'none',title:"登录失败"});return}
						that.uuid = res.data.data.uuid
						//跳转
						that.toindex(that)
					}
				})
			},
			// 跳转到遥控页面
			toindex(that){
				let select = that.select;
				try{
					uni.navigateTo({
						//访问地址
						url:"/pages/index/index?shengxiaoid="+select+"&uuid="+that.uuid,
						//传参
						// success: function(res){
						// 	res.eventChannel.emit('id', { 'shengxiaoid': select,'uuid':that.uuid })
						// }
					})
				// 登录失败处理
				}catch(e){
					console.log(e)
					uni.showToast({
						icon:'none',
						title:"登录失败"
					})
				}
			}
		}
	}	
</script>

<style lang="scss" scoped>
// .shengxiao{
// 	padding: 0 40rpx;
// 	display: flex;
// 	justify-content: space-between;
// 	flex-wrap: wrap;
// }
.shengxiao{
	// padding-left: 10rpx;
	padding: 0 40rpx;
	display: grid;
	grid-template-columns: repeat(3, 30%);
	// grid-template-rows: repeat(3, 30%);
	justify-content: space-between;
	
	flex-wrap: wrap;
}
.btn{
	
	margin-top: 10rpx;
	height: 150rpx;
	background-color: #aaffff;
	width: 400rpx;
	// margin-left: 275rpx;
	// line-height: 70rpx;
	margin: auto;
	text-align: center;
	background: url('@/static/1x/资源 14.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	
}
.shengxiaoobj{
	text-align: center;
	line-height: 190rpx;
	margin-top: 28rpx;
	width: 170rpx;
	// height: 170rpx;
	height: 250rpx;
	// background-color: #ffffff;
	border-radius: 10rpx;
}

.bgg{
	// background: url("/static/bg.jpg") no-repeat;
	background: url("@/static/1x/资源 背景.png") no-repeat;
	background-size:100% 100%;
	height: 100vh;
	position: relative;
}


.shengxiao1{
	background:url('@/static/1x/资源 1.png');
}
.shengxiao2{
	background:url('@/static/1x/资源 2.png');
}
.shengxiao3{
	background:url('@/static/1x/资源 3.png');
}
.shengxiao4{
	background:url('@/static/1x/资源 4.png');
}
.shengxiao5{
	background:url('@/static/1x/资源 5.png');
}
.shengxiao6{
	background:url('@/static/1x/资源 6.png');
}
.shengxiao7{
	background:url('@/static/1x/资源 7.png');
}
.shengxiao8{
	background:url('@/static/1x/资源 8.png');
}
.shengxiao9{
	background:url('@/static/1x/资源 9.png');
}
.shengxiao10{
	background:url('@/static/1x/资源 10.png');
}
.shengxiao11{
	background:url('@/static/1x/资源 11.png');
}
.shengxiao12{
	background:url('@/static/1x/资源 12.png');
}


//设置背景样式
.shengxiaoobj {
	left: 0;
	opacity: 1;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	
}

.select{
	
	// filter: drop-shadow(0 0 0.75rem crimson);
	// filter: hue-rotate(-45deg);
	// filter: contrast(200%);
	// filter:hue-rotate(270edg);
	// opacity: 1;
	// background-image:url('@/static/1x/资源 1.png')
	filter:invert(98%) hue-rotate(180deg);
}

@keyframes animation_shengxiaoobj {
	from{
		option:0.8;
	}
	to{
		opacity: 0.1;
	}
}

</style>
